import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, message } from 'antd';
import Ellipsis from '@/components/Ellipsis';
import PateoSearchForm from '@/components/common/PateoSearchForm';
import PateoAuthButtons from '@/components/common/PateoAuthButtons';
import PateoTable from '@/components/common/PateoTable';
import styles from '@/components/common/PateoTable/TableList.less';
import AccessManageModal from './modal'
// import PropTypes from 'prop-types';


const mapStateToProps = (state: any) => ({
  knowledgeAccessManage: state.knowledgeAccessManage,
  loading: state.loading.models['knowledgeAccessManage'],
});
class AccessManage extends PureComponent<any, any> {
  
  constructor(props: any) {
    super(props);
    this.state = {
      formValues: {},
      visible: false,
    }
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'knowledgeAccessManage/getFetchPage',
      payload: { url: '/mscontent/knowledge/getPermissions' },
    });
  }

  //  分配任务
  assignSpecialty = (record: any) => {
    this.setState({
      visible: true,
    }, () => {
      this.accessManageModal.setData(record)
    })
  }

  closeModal = () => {
    this.setState({
      visible: false,
    })
  }

  refreshPage = () => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    dispatch({
      type: 'knowledgeAccessManage/getFetchPage',
      payload: { url: '/mscontent/knowledge/getPermissions' },
    });
  }

  render() {
    const {
      knowledgeAccessManage: {
        pageData: { list, pagination },
      },
      loading,
      location: { pathname = '/' },
    } = this.props;

    const { formValues, visible } = this.state;
    const columns = [
      {
        title: '序号',
        dataIndex: 'no',
        width: 60,
        render: (text: any, record: any, index: any) => {
          return index + 1 + (pagination.current - 1) * pagination.pageSize;
        },
      },
      {
        title: '用户账号',
        dataIndex: 'accountName',
      },
      {
        title: '用户昵称',
        dataIndex: 'nickName',
      },
      {
        title: '专业分类',
        dataIndex: 'majorNames',
        render: (text: any, record: any) => {
          return <Ellipsis length={20} tooltip>{text.join('，')}</Ellipsis>;
        }
      },
      {
        title: '操作',
        dataIndex: '操作',
        width: 120,
        render: (text: any, record: any) => {
          const btns = [
            {
              title: '分配专业',
              key: 'assign',
              auth: 'knowledgeAccess_assign',
              onConfirm: () => this.assignSpecialty(record),
            },
          ];
          return <PateoAuthButtons btns={btns} max={2} pathname={pathname} />;
        }
      }
    ]

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => (
        <span>共&nbsp;{pagination === undefined ? 0 : pagination.total}&nbsp;条</span>
      ),
    };

    const tableProps = {
      columns,
      dataSource: list,
      loading,
      rowKey: (record: any) => record.accountSid,
      pagination: paginationProps,
      scroll: { x: 'max-content' },
    };

    const searchItems = [
      {
        type: 'input',
        title: '用户账号',
        key: 'accountName',
      },
      {
        type: 'input',
        title: '用户昵称',
        key: 'nickName',
      }
    ]
    return (
      <div>
        <Card bordered={false}>
          <PateoSearchForm
            searchItems={searchItems}
            fetchParams={{ type: 'knowledgeAccessManage/getFetchPage', url: '/mscontent/knowledge/getPermissions' }}
            saveFormValues={(val: any) =>
              this.setState({ formValues: Object.assign(formValues, val) })
            }
            handleFormReset={() => this.setState({ formValues: {} })}
          />
        </Card>
        <Card className={styles.standardTable}>
          <PateoTable
            extraHandle={true}
            tableProps={tableProps}
            fetchParams={{ type: 'knowledgeAccessManage/getFetchPage', url: '/mscontent/knowledge/getPermissions' }}
            formValues={formValues}
          />
        </Card>
        <AccessManageModal
          onRef={(modalRef: any) => (this.accessManageModal = modalRef)}
          modalVisible={visible}
          closeModal={this.closeModal}
          handleRefresh={this.refreshPage}
        />
      </div>
    )
  }
}

export default connect(mapStateToProps)(AccessManage);
